<template>
	<view class="index">
		<template v-if="JSON.stringify(YiLou_PingLun_XinXi) != '{}'">
			<view class="YuanTie" @click="DianJi_DaKai_YuanTie(YiLou_PingLun_XinXi.post.pid)">
				<text class="Zi">原帖</text>
				<view class="TouXiang">
					<image :src="YiLou_PingLun_XinXi.post.creator.avatar" mode="widthFix"></image>
				</view>
				<text class="NiCheng">{{YiLou_PingLun_XinXi.post.creator.nickname}}</text>
				<text class="NeiRong ErHang">{{$_GuoLv_HTML(YiLou_PingLun_XinXi.post.content)}}</text>
			</view>
			<view
				@click="$_TiaoZhuan('_XiangQing_YongHu/_XiangQing_YongHu?uid='+YiLou_PingLun_XinXi.creator.uid)"
				class="YouRan-UI-YongHu-1 Flex">
				<view class="Zuo">
					<view class="TouXiang">
						<image :src="YiLou_PingLun_XinXi.creator.avatar" mode="widthFix"></image>
					</view>
					<view class="YouXia Bj-LanSe" v-if="YiLou_PingLun_XinXi.creator.roleName=='普通会员'">普</view>
					<view class="YouXia Bj-HongSe" v-if="YiLou_PingLun_XinXi.creator.roleName=='管理员'">管</view>
				</view>
				<view class="Zhong">
					<view class="Zhong-Shang">
						<view class="NiCheng H2">{{YiLou_PingLun_XinXi.creator.nickname}}</view>
					</view>
					<view class="Zhong-Xia Flex">
						<text class="P">{{YiLou_PingLun_XinXi.creator.roleName}}</text>
						<text class="P">{{YiLou_PingLun_XinXi.createTimeFormat}}</text>
					</view>
				</view>
				<view class="You Flex">
					<view class="AnNiu Flex">
						<text class="iconfont icon-add"></text>
						<text class="P">关注</text>
					</view>
				</view>
			</view>
			<view class="ZhengWen-NeiRong">
				<mp-html
					:content="$_HTML_MaoDian_Zhuan_App_MaoDian(YiLou_PingLun_XinXi.content)"
					:tag-style="PingLun_NeiRong_HTML_Css"
					:selectable="true"/>
			</view>
			<!-- 附件 > 图片 -->
			<view class="FuJian-LieBiao" v-if="YiLou_PingLun_XinXi.fileCount.images">
				<view class="FuJian-LieBiao-BiaoTi">
					<text class="iconfont icon-tupian"></text>
					<text class="WenZi">图片附件</text>
				</view>
				<view class="XunHuan">
					<view
						@click="$_TiaoZhuan('_Z_GongYong/TuPian_YuLan?url=' + item.imageBigUrl)"
						v-for="(item,index) in YiLou_PingLun_XinXi.files.images">
						<image :src="item.imageSquareUrl" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 附件 > 音频 -->
			<view class="FuJian-LieBiao" v-if="YiLou_PingLun_XinXi.fileCount.audios">
				<view class="FuJian-LieBiao-BiaoTi" style="background: #67C23A;">
					<text class="iconfont icon-yuyin"></text>
					<text class="WenZi">音频附件</text>
				</view>
				<view
					class="YinPin-XunHuan"
					v-for="item in YiLou_PingLun_XinXi.files.audios">
					<YouRan-UI-YinPin
						Css="width:350rpx;"
						:Url="item.audioUrl"></YouRan-UI-YinPin>
				</view>
			</view>
			<!-- 下边是评论列表 -->
			<view class="YouRan-UI-LieBiao-3">
				<template v-if="Zi_PingLun_LieBiao_ZhuangTai=='YouShuJu'">
					<view
						@click="DianJi_XuanZe_BenLou_ChaRu_AiTe(item.creator.username,item.cid)"
						v-for="item in Zi_PingLun_LieBiao"
						class="XunHuan Flex">
						<view
							@click.stop="$_TiaoZhuan('_XiangQing_YongHu/_XiangQing_YongHu?uid=' + item.creator.uid)"
							class="Zuo">
							<image :src="item.creator.avatar" mode="widthFix"></image>
						</view>
						<view class="You">
							<view class="NiCheng Zt-ShenLanSe">{{item.creator.nickname}}</view>
							
							<template v-if="item.replyToComment">
								<view class="HuiFu-Gei-Shei">
									<!-- 1 -->
									<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment">
										<!-- 2 -->
										<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment">
											<!-- 3 -->
											<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment">
												<!-- 4 -->
												<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment">
													<!-- 5 -->
													<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment">
														<!-- 6 -->
														<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment">
															<!-- 7 -->
															<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment">
																<!-- 8 -->
																<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment">
																	<!-- 9 -->
																	<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment">
																		<!-- 10 -->
																		<view class="HuiFu-Gei-Shei" v-if="item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment">
																			<view class="_Shang">
																				<text class="_Shang_Zi">回复</text>
																				<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
																				<text class="_Shang_Zi">发表于</text>
																				<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
																			</view>
																			<view class="_Xia">
																				<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
																			</view>
																		</view>
																		<view class="_Shang">
																			<text class="_Shang_Zi">回复</text>
																			<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
																			<text class="_Shang_Zi">发表于</text>
																			<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
																		</view>
																		<view class="_Xia">
																			<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
																		</view>
																	</view>
																	<view class="_Shang">
																		<text class="_Shang_Zi">回复</text>
																		<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
																		<text class="_Shang_Zi">发表于</text>
																		<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
																	</view>
																	<view class="_Xia">
																		<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
																	</view>
																</view>
																<view class="_Shang">
																	<text class="_Shang_Zi">回复</text>
																	<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
																	<text class="_Shang_Zi">发表于</text>
																	<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
																</view>
																<view class="_Xia">
																	<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
																</view>
															</view>
															<view class="_Shang">
																<text class="_Shang_Zi">回复</text>
																<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
																<text class="_Shang_Zi">发表于</text>
																<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
															</view>
															<view class="_Xia">
																<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
															</view>
														</view>
														<view class="_Shang">
															<text class="_Shang_Zi">回复</text>
															<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
															<text class="_Shang_Zi">发表于</text>
															<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
														</view>
														<view class="_Xia">
															<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
														</view>
													</view>
													<view class="_Shang">
														<text class="_Shang_Zi">回复</text>
														<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
														<text class="_Shang_Zi">发表于</text>
														<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
													</view>
													<view class="_Xia">
														<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
													</view>
												</view>
												<view class="_Shang">
													<text class="_Shang_Zi">回复</text>
													<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
													<text class="_Shang_Zi">发表于</text>
													<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
												</view>
												<view class="_Xia">
													<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.replyToComment.content)}}</text>
												</view>
											</view>
											<view class="_Shang">
												<text class="_Shang_Zi">回复</text>
												<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.creator.nickname}}</text>
												<text class="_Shang_Zi">发表于</text>
												<text class="_Shang_Zi">{{item.replyToComment.replyToComment.replyToComment.createTimeFormat}}</text>
											</view>
											<view class="_Xia">
												<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.replyToComment.content)}}</text>
											</view>
										</view>
										<view class="_Shang">
											<text class="_Shang_Zi">回复</text>
											<text class="_Shang_Zi">{{item.replyToComment.replyToComment.creator.nickname}}</text>
											<text class="_Shang_Zi">发表于</text>
											<text class="_Shang_Zi">{{item.replyToComment.replyToComment.createTimeFormat}}</text>
										</view>
										<view class="_Xia">
											<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.replyToComment.content)}}</text>
										</view>
									</view>
									
									<!-- 最新的 -->
									<view class="_Shang">
										<text class="_Shang_Zi">回复</text>
										<text class="_Shang_Zi">{{item.replyToComment.creator.nickname}}</text>
										<text class="_Shang_Zi">发表于</text>
										<text class="_Shang_Zi">{{item.replyToComment.createTimeFormat}}</text>
									</view>
									<view class="_Xia">
										<text class="SanHang">{{$_GuoLv_HTML(item.replyToComment.content)}}</text>
									</view>
								</view>
							</template>
							
							
							<!-- 文字摘要 -->
							<view class="ZhaiYao">
								<mp-html
									:content="$_HTML_MaoDian_Zhuan_App_MaoDian(item.content)"
									:tag-style="PingLun_NeiRong_HTML_Css"
									:selectable="true"/>
							</view>
							<!-- 音频 -->
							<view class="YinPin" v-if="item.fileCount.audios">
								<template v-for="(item_Yin,index) in item.files.audios">
									<view style="margin-top: 20rpx;padding-bottom: 20rpx;">
										<YouRan-UI-YinPin
											Css="width:350rpx;"
											:Url="item_Yin.audioUrl"></YouRan-UI-YinPin>
									</view>
								</template>
							</view>
							<!-- 图片 -->
							<view class="TuPian Flex" v-if="item.fileCount.images">
								<view
									@click="$_TiaoZhuan('_Z_GongYong/TuPian_YuLan?url=' + item_Tu.imageBigUrl)"
									v-for="(item_Tu,index) in item.files.images">
									<image :src="item_Tu.imageSquareUrl" mode="widthFix"></image>
								</view>
							</view>
							<view
								style="margin:15rpx 0 0 0;"
								class="TieZi-XinXi Flex">
								<text class="P">{{item.createTimeFormat}}</text>
								<view class="LeiXing Flex">
									<text class="Bj-BianKuangSe iconfont icon-pinglun"></text>
									<text class="Bj-BianKuangSe iconfont icon-gengduo"></text>
								</view>
							</view>
						</view>
					</view>
					<view
						@click="QingQiu_PingLun_Zi_LieBiao('FanYe')"
						class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
						style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
				</template>
				<template v-if="Zi_PingLun_LieBiao_ZhuangTai=='JiaZaiZhong'">
					<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
				</template>
				<template v-if="Zi_PingLun_LieBiao_ZhuangTai=='WuShuJu'">
					<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
						<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
						<view class="Zt-ZhanWeiSe">暂无任何数据</view>
					</view>
				</template>
			</view>
			
			
			
			
			
			<view style="width: 100%;height: 100rpx;"></view>
			<view class="YouRan-UI-WeiBu-XuanFu-PingLun">
				<textarea
					maxlength="-1"
					:show-confirm-bar="false"
					cursor-spacing="300"
					v-model="Vmodel_PingLun_NeiRong"></textarea>
				<text class="iconfont icon-shequ" @click="$_TiaoZhuan('_Z_GongYong/AiTe_LieBiao')"></text>
				<text class="iconfont icon-huati" @click="$_TiaoZhuan('_Z_GongYong/HuaTi_LieBiao')"></text>
				<text class="iconfont icon-smile" @click="$_TiaoZhuan('_Z_GongYong/BiaoQing_LieBiao')"></text>
				<!-- #ifndef H5 -->
				<text
					@click="$_TiaoZhuan(`_FaBu/_HuiFu?n=${Vmodel_PingLun_NeiRong}&pid=${YiLou_PingLun_XinXi.post.pid}&cid=${CID}`)"
					class="iconfont icon-add-circle"></text>
				<!-- #endif -->
				<view @click="DianJi_FaBu_PingLun">发布</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				YiLou_PingLun_XinXi:{},
				PingLun_NeiRong_HTML_Css:{
					p:"font-size:32rpx;line-height: 60rpx;",
					a:"color: #F56C6C;text-decoration: underline;margin:0 15rpx;"
				},
				Zi_PingLun_LieBiao:[],
				Zi_PingLun_LieBiao_YeMa:2,
				Zi_PingLun_LieBiao_ZhuangTai:"JiaZaiZhong",
				Vmodel_PingLun_NeiRong:"",
				Api_BianJiQi_PeiZhi:{},
				CID:""
			}
		},
		onShow() {
			uni.getStorage({
				key: 'TongZhi_ShangYiYe',
				success: (res) => {
					this.Vmodel_PingLun_NeiRong = "";
					this.QingQiu_PingLun_XiangQing();
					uni.removeStorage({ key: 'XuanZhong_BiaoQing' });
				}
			});
			uni.getStorage({
				key: 'XuanZhong_BiaoQing',
				success: (res) => {
					this.Vmodel_PingLun_NeiRong += res.data;
					uni.removeStorage({ key: 'XuanZhong_BiaoQing' });
				}
			});
			uni.getStorage({
				key: 'XuanZhong_AiTe',
				success: (res) => {
					this.Vmodel_PingLun_NeiRong += ' @'+res.data+' ';
					uni.removeStorage({ key: 'XuanZhong_AiTe' });
				}
			});
			uni.getStorage({
				key: 'XuanZhong_HuaTi',
				success: (res) => {
					if(this.Api_BianJiQi_PeiZhi.editor.toolbar.hashtag.showMode == 1){
						this.Vmodel_PingLun_NeiRong += ' #'+res.data+' ';
						uni.removeStorage({ key: 'XuanZhong_HuaTi' });
					}else{
						this.Vmodel_PingLun_NeiRong += ' #'+res.data+'# ';
						uni.removeStorage({ key: 'XuanZhong_HuaTi' });
					}
					uni.removeStorage({ key: 'XuanZhong_HuaTi' });
				}
			});
		},
		onLoad(e) {
			this.CID = e.cid;
			this.QingQiu_PingLun_XiangQing();
		},
		methods: {
			QingQiu_PingLun_XiangQing(){
				this.$_QingQiu(
					"GET","/api/v2/comment/"+this.CID+"/detail",{},
					(res) => {
						this.YiLou_PingLun_XinXi = res.data.data.detail;
						this.QingQiu_BianJiQi_PeiZhi();
					}
				)
			},
			DianJi_DaKai_YuanTie(e){
				uni.redirectTo({
					url:"/pages/_XiangQing_TieZi/_XiangQing_TieZi?pid="+e
				});
			},
			QingQiu_BianJiQi_PeiZhi(){
				this.$_QingQiu(
					"GET","/api/v2/editor/post/config",{},
					(res) => {
						this.Api_BianJiQi_PeiZhi = res.data.data;
						this.QingQiu_PingLun_Zi_LieBiao();
					}
				)
			},
			QingQiu_PingLun_Zi_LieBiao(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/comment/list",
					{
						"cid":this.CID,
						"whitelistKeys":"creator.username,cid,creator.uid,creator.avatar,creator.nickname,content,fileCount,files,createTimeFormat,replyToComment",
						"pageSize": 10,
						"page":FanYe ? this.Zi_PingLun_LieBiao_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.Zi_PingLun_LieBiao = this.Zi_PingLun_LieBiao.concat(res.data.data.list);
								this.Zi_PingLun_LieBiao_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							this.Zi_PingLun_LieBiao = res.data.data.list;
							if(this.Zi_PingLun_LieBiao.length){
								this.Zi_PingLun_LieBiao_ZhuangTai = "YouShuJu"
							}else{
								this.Zi_PingLun_LieBiao_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			},
			DianJi_XuanZe_BenLou_ChaRu_AiTe(e,cid){
				this.Vmodel_PingLun_NeiRong += '@'+e+' ';
				this.CID_Zi = cid;
			},
			DianJi_FaBu_PingLun(){
				uni.showLoading({ title: "回复中" });
				this.$_QingQiu(
					"POST","/api/v2/editor/comment/quick-publish",
					{
						"commentPid":this.YiLou_PingLun_XinXi.post.pid,
						"commentCid":this.CID_Zi ? this.CID_Zi : this.CID,
						"content":this.$_GuoLv_HTML(this.Vmodel_PingLun_NeiRong)
					},
					(res) => {
						uni.hideLoading();
						this.CID_Zi = false;
						if(res.data.code == 0){
							this.QingQiu_PingLun_Zi_LieBiao();
							this.Vmodel_PingLun_NeiRong = "";
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			}
		},
		onBackPress(e){
			if(e.from == 'backbutton'){
				uni.$emit('ChongXinQingQiu_PingLun_LieBiao',{msg:''})
			}
		},
	}
</script>

<style lang="scss">
.index{
	.YuanTie{
		margin: 25rpx 25rpx 0 25rpx;
		padding: 15rpx 20rpx;
		background: $BianKuangSe;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		.Zi{
			font-size: 20rpx;
			line-height: 20rpx;
			flex-shrink: 0;
			color: #FFF;
			background: $HongSe;
			padding: 10rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.TouXiang{
			width: 40rpx;
			height: 40rpx;
			margin: 0 15rpx;
			border-radius: 100%;
			overflow: hidden;
		}
		.NiCheng{
			flex-shrink: 0;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $ShenLanSe;
		}
		.NeiRong{
			flex: 1;
			font-size: 28rpx;
			margin-left: 15rpx;
			line-height: 35rpx;
		}
	}
	.YouRan-UI-YongHu-1{
		padding: 25rpx 25rpx 0 25rpx;
		border-top: 25rpx solid $BeiJingSe;
		margin-top: 25rpx;
	}
	.ZhengWen-NeiRong{
		padding: 25rpx;
	}
	.YouRan-UI-LieBiao-3{
		border-top: 25rpx solid $BeiJingSe;
		margin-top: 25rpx;
		.XunHuan{
			.You{
				.HuiFu-Gei-Shei{
					background-color: #fffcf1;
					border: 1rpx dashed $BianKuangSe;
					margin: 15rpx 0 15rpx 0;
					._Shang{
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						._Shang_Zi{
							font-size: 28rpx;
							line-height: 28rpx;
							color: $ZhanWeiSe;
							margin: 20rpx 10rpx 0 0;
						}
						._Shang_Zi:nth-child(2){
							border-right: 1rpx solid $BianKuangSe;
							padding-right: 10rpx;
						}
					}
					._Xia{
						font-size: 28rpx;
						color: $ZhanWeiSe;
						line-height: 40rpx;
						padding:10rpx 20rpx 15rpx 20rpx;
					}
				}
			}
		}
	}
	.FuJian-LieBiao{
		.FuJian-LieBiao-BiaoTi{
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $LanSe;
			height: 40rpx;
			border-radius: 100rpx;
			margin: 25rpx auto auto auto;
			text{
				font-size: 22rpx;
				line-height: 22rpx;
				color: #FFF;
				text-shadow: 0 0 1rpx #000;
			}
			.iconfont{
				font-size: 28rpx;
				line-height: 28rpx;
				margin-right: 5rpx;
			}
		}
		.XunHuan{
			margin: 25rpx 25rpx 0 25rpx;
			display: flex;
			flex-wrap: wrap;
			view{
				width: 226.666666rpx;
				height: 200rpx;
				overflow: hidden;
				margin-top: 10rpx;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
				border-radius: 10rpx;
			}
			view:nth-child(2),view:nth-child(5),view:nth-child(8),view:nth-child(11),view:nth-child(14),view:nth-child(17),view:nth-child(20),view:nth-child(23),view:nth-child(26),view:nth-child(29){
				margin: 10rpx 10rpx 0 10rpx;
			}
		}
		.ShiPin-XunHuan{
			margin: 25rpx 25rpx 0 25rpx;
			display: flex;
			flex-wrap: wrap;
			.ShiPin-XunHuan-Kuai{
				width: 226.666666rpx;
				height: 200rpx;
				overflow: hidden;
				margin-top: 10rpx;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
				border-radius: 10rpx;
				position: relative;
				.ShiPin-XunHuan-Kuai-TuPian{
					width: 226.666666rpx;
					height: 200rpx;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.ShiPin-XunHuan-Kuai-TuBiao{
					width: 226.666666rpx;
					height: 200rpx;
					overflow: hidden;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color:rgba(0,0,0,0.6);
					.icon-play{
						font-size: 80rpx;
						line-height: 80rpx;
						color: #FFF;
					}
				}
			}
			.ShiPin-XunHuan-Kuai:nth-child(2),.ShiPin-XunHuan-Kuai:nth-child(5),.ShiPin-XunHuan-Kuai:nth-child(8){
				margin: 10rpx 10rpx 0 10rpx;
			}
		}
		.YinPin-XunHuan{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 25rpx;
		}
	}
}
</style>
